<template>
  <div>
    <h1  v-bgred>自定义指令</h1>

     <hr />
    <p v-bgred v-bold>show</p>
  </div>
</template>

<script>
/* 
  有的情况下，你仍然需要对普通 DOM 元素进行底层操作，
  这时候就会用到自定义指令
*/
export default {
  name: "App",
  directives: {
    bgred(ele) {
      /* 
        自定义指令基础用法中,第一个参数拿到的当前DOM元素
        
      */
      ele.style.background = "red";
    },
  },
};
</script>

<style>
</style>